<script lang="ts" setup>
import { reactive } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Col,
  Input,
  Row,
  Select,
  SelectOption,
  Space,
} from 'ant-design-vue';

const searchForm = reactive({
  keyword: '',
  businessType: '',
  isPrimary: undefined as boolean | undefined,
});

const handleSearch = () => {
  console.log('搜索归属:', searchForm);
};

const handleReset = () => {
  Object.assign(searchForm, {
    keyword: '',
    businessType: '',
    isPrimary: undefined,
  });
  handleSearch();
};

const openOwnershipForm = (type: 'create' | 'edit') => {
  console.log('打开归属表单:', type);
};
</script>

<template>
  <div class="resource-ownership">
    <div class="ownership-header">
      <Row :gutter="16">
        <Col :span="8">
          <Input
            v-model:value="searchForm.keyword"
            placeholder="搜索资源名称、归属方"
            allow-clear
            @change="handleSearch"
          />
        </Col>
        <Col :span="4">
          <Select
            v-model:value="searchForm.businessType"
            placeholder="业务类型"
            allow-clear
            @change="handleSearch"
          >
            <SelectOption value="HOTEL">酒店</SelectOption>
            <SelectOption value="APARTMENT">公寓</SelectOption>
            <SelectOption value="HOT_SPRING">温泉洗浴</SelectOption>
            <SelectOption value="RESTAURANT">餐饮</SelectOption>
            <SelectOption value="PET_MEDICAL">宠物医疗</SelectOption>
            <SelectOption value="MEDICAL_BEAUTY">医美</SelectOption>
            <SelectOption value="TRAINING">培训班</SelectOption>
          </Select>
        </Col>
        <Col :span="4">
          <Select
            v-model:value="searchForm.isPrimary"
            placeholder="归属类型"
            allow-clear
            @change="handleSearch"
          >
            <SelectOption :value="true">主要归属</SelectOption>
            <SelectOption :value="false">次要归属</SelectOption>
          </Select>
        </Col>
        <Col :span="8">
          <Space>
            <Button type="primary" @click="handleSearch">搜索</Button>
            <Button @click="handleReset">重置</Button>
            <Button type="primary" @click="openOwnershipForm('create')">
              新增归属
            </Button>
          </Space>
        </Col>
      </Row>
    </div>

    <div class="ownership-content">
      <Card title="资源归属管理" :bordered="false">
        <div class="placeholder-content">
          <IconifyIcon icon="mdi:account-multiple" size="48" />
          <p>资源归属管理功能开发中...</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<style scoped>
.resource-ownership {
  padding: 20px;
}

.ownership-header {
  padding: 20px;
  margin-bottom: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.ownership-content {
  margin-bottom: 24px;
}

.placeholder-content {
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.placeholder-content p {
  margin-top: 16px;
  font-size: 16px;
}
</style>
